<template>
  <div class="user-profile">
    <div class="sidebar">
      <img class="avatar" :src="this.avatarUrl" alt="avatar">
      <p class="nickname">{{ this.user.name }}</p>
      <p class="phone">{{ this.user.phone }}</p>
    </div>

    <div class="window">
      <div class="profile-title">
    <h2>资料编辑</h2>
  </div>
    <div class="content">

      <div class="avatar-section">
        <h3>更改头像</h3>
        <div class="image-upload" @click="handleImageUpload">
          <p v-if="!selectedImage">点击选择图片</p>
          <img v-else :src="selectedImage" alt="Selected Image">
        </div>
        <input type="file" ref="fileInput" @change="handleImageChange" style="display: none">
      </div>

      <div class="nickname-section">
        <h3>用户名</h3>
        <input type="text" v-model="newNickname">
      </div>

      <button class="savebtn" @click="saveChanges">保存</button>
    </div>
  </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      selectedImage: '',
      newNickname: '',
      afile:'',
      user: {},
      avatarUrl: ''
    };
  },
  created() {
      // 发送请求获取用户信息和头像地址
      this.$axios.get('http://localhost/api/user/info', {
        headers: {'token': sessionStorage.getItem('token') }
      }).then(response => {
        console.log(response);
        this.user = response.data;
        this.avatarUrl = response.data.avatarUrl;
      }).catch(error => {
        console.error('获取用户信息失败', error);
      });
  },
  methods: {
    handleImageUpload() {
      this.$refs.fileInput.click();
    },
    handleImageChange(event) {
      this.afile = event.target.files[0];
      const file = event.target.files[0];
      if (file) {
        this.selectedImage = URL.createObjectURL(file);
      }
    },
    saveChanges() {
      const formData = new FormData();
      formData.append('avatar', this.afile); // 将文件添加到 FormData 中
      formData.append('name', this.newNickname);
      console.log(formData);

      this.$axios.post('http://localhost/api/user/editInfo', formData, {headers: {
          'Content-Type': 'multipart/form-data',
          'token': sessionStorage.getItem('token')
        }})
        .then(response => {
          console.log(response.data);
          if (response.data.state === '1') {
            console.log('Profile updated successfully:', response.data);
            alert("头像更新成功！");
          }
          if (response.data.state === '2') {
            console.log('Profile updated successfully:', response.data);
            alert("用户名更新成功！");
          }
          if (response.data.state === '3') {
            console.log('Profile updated successfully:', response.data);
            alert("头像与用户名更新成功！");
          }
          if (response.data.state === '0') {
            alert('更新失败，请重试！');
          }
          this.$router.go(0); //刷新页面
        })
        .catch(error => {
          console.error('Error updating profile:', error);
          alert("更新失败，请重试！");
        });
    }
  }
};
</script>


<style scoped>
.user-profile {
  display: flex;
  margin: 0 auto;
  height: auto;
}

.sidebar {
  width: 300px;
  height: 300px;
  padding: 20px;
  margin-top: 20px;
  margin-left: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.sidebar img {
  margin: 10px;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.nickname {
  font-size: 18px;
  font-weight: bold;
}

.phone {
  font-size: 15px;
}

.window {
  width: 100%;
  margin: 20px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  display: flex;
  justify-content: center;
  position: relative;
}
.profile-title {
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px;
  border-bottom: 1px solid #ccc;
}

.profile-title h2 {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
}

.content {
  flex: 1;
  padding: 20px;
  width: 100px;
}

.avatar-section {
  margin: 20px;
  text-align: center;
}

.nickname-section {
  margin: 20px;
}

.image-upload {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid #15623f;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin: 20px;
}

.image-upload p {
  font-size: 16px;
  color: #777;
}

.image-upload img {
  max-width: 100%;
  max-height: 100%;
}

.savebtn {
  background-color: #2980b9;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 12px 24px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color .3s ease-in-out;
  margin-top: 20px;
}

.savebtn:hover {
  background-color: #83c19d;
}
</style>

